<template>
	<view class="follow_content">
		<view v-show="isEmpty">
			<EmptyView v-on:emptyClick="emptyClick" />
		</view>
		<scroll-view v-show="isEmpty===false" scroll-y="true" class="follow_content" refresher-enabled="true"
		@scroll="scrollAction"
		 :refresher-triggered="triggered" :refresher-threshold="100" @refresherpulling="onPulling" @refresherrefresh="onRefresh"
		 @refresherrestore="onRestore" @refresherabort="onAbort">
			<view v-for="(item, index) in followedList" :key="index" @click="toDetail(item)" class="card">
				<view class="title">
					<view class="left">
						<image @click.stop="toPersionHomeAction(item)" :src="item.user_info.avatar || 'http://static.kuaimayoupin.com/5814340611455953.png'"
						 mode="aspectFit"></image>
						<view>
							<view style="display: flex; align-items: center;">
								<text class="name">{{ item.user_info.nick_name || "匿名" }}</text>
								<text v-show="showMark(item)" class="mark">{{item.user_info.user_status}}</text>
							</view>
							<view class="fate-value-box">
								<text class="fate-value-title"> {{"缘分值："}} </text>
								<text class="fate-value"> {{item.fate_value || 50}} </text>
							</view>

						</view>
					</view>
					<view class="right">
						<text> {{ item.created_time | dateformatsort }}</text>
						<!-- <text>12:00</text> -->
					</view>
				</view>
				<view class="text-note">{{ item.note }}</view>
				<template v-if="getItemImgs(item).length > 0">
					<view class="img-box">
						<img-box :imgList="getItemImgs(item)"
						 :isVideo = "isvideo(item)"
						 :num="getItemImgs(item).length"></img-box>
					</view>
				</template>
				<view class="bottom">
					<view @click.stop="hellowAction(item)" class="hello-btn-view">
						<text class="placeholder_text">心动不如行动，快来打个招呼吧</text>
					</view>
					<view class="bottom-right">
						<view @click.stop="praiseAction(item)" class="heart">
							<image :src="getAixin(item)" mode=""></image>
							<text>{{item.like_count || 20}}</text>
						</view>
						<view @click.stop="hellowAction(item)" class="flower">
							<image :src="getFlower(item)" mode=""></image>
							<text>{{item.gifts_count || 0}}</text>
						</view>
						<view @click.stop="shareAction(item)" class="share">
							<image src="../../../static/images/detail/share.png" mode=""></image>
							<text>分享</text>
							<button :id="item.userId" class="share-btn" open-type="share"></button>
						</view>
					</view>

				</view>
			</view>
			<view class="bottom"></view>
		</scroll-view>
	</view>


</template>

<script>
	import {
		followed,
		giveLike,
		getGiftsList
	} from '@/api/home/home.js';
	import {
		EventBus
	} from '@/util/event-bus.js';
	import authDialog from './auth-dialog.vue';
	// import EmptyView from '@/pageA/empty/empty.vue'
	import imgBox from './imageBox.vue';
	export default {
		components: {
			authDialog,
			// EmptyView,
			imgBox
		},
		data() {
			return {
				followedList: [], // 推荐列表
				showGift: false,
				_freshing: false,
				triggered: false,
				gifts: [],
				isEmpty: false,
			};
		},
		created() {
			let that = this;
			EventBus.$on('loginSuccess', function(res) {
				that.getFollowed()
			});
			EventBus.$on('likeAction', function(res) {
				console.log("likeAction-------", res);
				that.refreshItemStatus(res)
			});
			EventBus.$on('videoStop', function(res) {

			});
			this.getGiftsListRequest()
		},
		mounted() {
			this._freshing = false;
			this.triggered = true
		},
		methods: {
			onPulling(e) {},
			onRefresh() {
				if (this._freshing) return;
				this._freshing = true;
				this.getFollowed()
			},
			onRestore() {
				this.triggered = 'restore';
			},
			scrollAction(event){

			},
			onAbort() {},
			getData() {},
			getItemImg(item){
				let pics = item.pic_urls || []
				let video_url = item.video_url || ""
				if (pics.length > 0) {
					return pics[0]
				} else if (video_url.length > 0) {
					return video_url + "?vframe/jpg/offset/0"
				} else {
					return item.user_info.avatar || ""
				}
			},
			getItemImgs(item){
				let pics = item.pic_urls || []
				let video_url = item.video_url || ""
				let avatarUrl =  item.user_info.avatar || ""
				if (pics.length > 0) {
					return pics
				} else if (video_url.length > 0) {
					let img = video_url + "?vframe/jpg/offset/0"
					return [img]
				} else if (avatarUrl.length > 0){
					return [avatarUrl]
				} else {
					return []
				}
			},
			isvideo(item){
				let pics = item.pic_urls || []
				let video_url = item.video_url || ""
				if (pics.length === 0 && video_url.length != ""){
					return true
				}
				return false
			},
			// 获取 关注列表
			getFollowed(showLoading = false) {
				console.log("follow-----------")
				this.showLoading(showLoading)
				followed().then(res => {
					if (res.status == 1) {
						this.followedList = res.data;
						this.handleData()
						console.log('------talkingTip/followed--------', this.followedList);
					}
					this.isEmpty = this.followedList.length === 0
					if (!showLoading) {
						this.triggered = false;
						this._freshing = false;
					}
					this.showLoading(false)
				}, err => {
					if (!showLoading) {
						this.triggered = false;
						this._freshing = false;
					}
					this.isEmpty = true
					this.showLoading(false)
				});
			},
			handleData() {

			},
			emptyClick() {
				this.getFollowed(true)
			},
			showLoading(show = true) {
				if (show) {
					uni.showLoading({
						title: ""
					})
				} else {
					uni.hideLoading()
				}

			},
			getGiftsListRequest() {
				getGiftsList().then(res => {
					if (res.status == 1) {
						this.gifts = res.data;
						console.log('------gifts--------', this.gifts);
					}
				})
			},
			hellowAction(item) {
				// if (this.isAuth() == false) {
				// 	let userInfo = item.user_info || {}
				// 	this.$emit("showAuth",{userName:userInfo.nick_name,avatar:userInfo.avatar})
				// 	return
				// }
				let giftsData = {}
				giftsData.gifts = this.gifts
				giftsData.userInfo = item.user_info
				this.$emit("showHello", giftsData)
			},
			praiseAction(item) {
				giveLike({
					"id": item._id || "",
					like: !(item.has_give_like || false)
				}).then(res => {
					if (res.status == 1) {
						if (item.has_give_like || false) {
							item.like_count -= 1
						} else {
							item.like_count += 1
							uni.showToast({
								title:"我喜欢你点赞的样子哦",
								icon:"none"
							})
						}
						item.has_give_like = !(item.has_give_like || false)
					}
				}, err => {

				})
			},

			isAuth() {
				return getApp().globalData.userInfo.certificated || false
			},
			giftDismiss() {
				console.log("giftDismiss")
				this.showGift = false
			},
			giveRoseAction() {

			},
			toDetail(data) {
				let url = '/pages/home/detial/detial?trendsId=' + (data._id || "") + "&userId=" + (data.userId || "")
				uni.navigateTo({
					url: url
				});
			},
			toPersionHomeAction(item) {
				let userId = item.userId ?? ""
				let url = '/pageA/personalHome/personalHome?user_id=' + userId;
				uni.navigateTo({
					url: url
				});
			},
			showMark(item) {

				let status = item.user_status || ""
				return status.length > 0
			},
			getAixin(item) {
				if (item.has_give_like == true) {
					return "../../../static/images/home/aixin.png"
				} else {
					return "../../../static/images/detail/heart_2.png"
				}
			},
			getFlower(item) {
				if (item.has_send_gifts) {
					return "../../../static/images/detail/flower_1.png"
				} else {
					return "../../../static/images/detail/flower_2.png"
				}
			},
			videoClick() {

			},
			shareAction(item) {},
			refreshItemStatus(res) {
				this.followedList.map((item, index) => {
					if (item._id == res._id) {
						item.has_give_like = res.has_give_like
						if (res.has_give_like == true) {
							item.like_count += 1
						} else {
							item.like_count -= 1
						}
					}
				})
			},
			
		}
	};
</script>

<style scoped lang="scss">
	* {
		box-sizing: border-box;
	}

	.follow_content {
		height: 100%;
		background-color: #FFFFFF;

		.bottom {
			height: 35upx;
			width: 100%;
		}

		.card {
			width: 670upx;
			margin: 0 auto;
			margin-top: 20upx;
			background: #fff;
			box-shadow: 0upx 6upx 20upx 0upx rgba(0, 42, 64, 0.07);
			border-radius: 12upx;

			.title {
				width: 100%;
				box-sizing: border-box;
				padding: 40upx 24upx 20upx 24upx;
				display: flex;
				justify-content: space-between;

				.left {
					display: flex;

					image {
						width: 92upx;
						height: 92upx;
						display: block;
						border-radius: 50%;
					}

					.name {
						line-height: 48upx;
						font-size: 34upx;
						font-weight: 500;
						color: #474a58;
						margin: 0 10upx 0 20upx;
					}

					.mark {
						height: 40upx;
						line-height: 38upx;
						background: #fff6eb;
						border-radius: 4upx;
						padding: 0 10upx;
						border: 2upx solid #ffaa37;
						font-size: 26upx;
						color: #ffaa37;
						text-align: center;
					}

					.fate-value-box {
						margin-left: 20upx;
						color: #8389A0;

						text {
							font-size: 26upx;
							font-weight: 400;
						}
					}
				}

				.right {
					line-height: 36upx;
					font-size: 26upx;
					color: #8389a0;
				}
			}

			.text-note {
				width: 622upx;
				margin: 0 auto;
				margin-top: 20upx;
				line-height: 49upx;
				font-size: 30upx;
				font-weight: 400;
				color: #474A58;
			}

			.img-box{
				width: 622upx;
				margin: 0 auto;
				margin-top: 10upx;
				border-radius: 12upx 12upx 0upx 0upx;
				position: relative;
			}

			.video_box {
				width: 622upx;
				height: 620upx;
				margin: 0 auto;
				margin-top: 10upx;
				border-radius: 12upx 12upx 0upx 0upx;

				video {
					width: 100%;
					height: 100%;
				}
			}

			.bottom {
				box-sizing: border-box;
				width: 100%;
				height: 104upx;
				margin: 12upx 0;
				background: #fff;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 32upx;

				.hello-btn-view {
					display: flex;
					align-items: center;
					align-items: center;
					width: 416upx;
					height: 64upx;
					background: #f3f6f8;
					border-radius: 4upx;
					padding: 0 20upx;
					box-sizing: border-box;

					text {
						width: 404upx;
					}
				}

				.placeholder_text {
					width: 100%;
					font-size: 26upx;
					color: #8389a0;
					line-height: 64upx;
				}

				.bottom-right {
					margin-left: 20upx;
					width: 100%;
					display: flex;
					flex-direction: row;
					align-items: flex-end;
					justify-content: space-between;

					.heart {
						display: flex;
						flex-direction: column;
						align-items: center;

						image {
							width: 46upx;
							height: 40upx;
						}

						text {
							line-height: 32upx;
							font-size: 22upx;
							color: #8389a0;
						}
					}

					.flower {
						display: flex;
						flex-direction: column;
						align-items: center;

						image {
							width: 42upx;
							height: 50upx;
						}

						text {
							line-height: 32upx;
							font-size: 22upx;
							color: #8389a0;
						}
					}

					.share {
						display: flex;
						flex-direction: column;
						align-items: center;
						position: relative;

						image {
							width: 40upx;
							height: 38upx;
						}

						text {
							font-size: 22upx;
							font-weight: 400;
							color: rgba(131, 137, 160, 1);
						}

						.share-btn {
							position: absolute;
							width: 100%;
							height: 100%;
							top: 0;
							right: 0;
							z-index: 10;
							background: transparent;
						}

						button::after {
							border: none;
						}
					}
				}

			}
		}
	}
</style>
